// 导入path模块
const path = require('path')

// 引入vue-loader的插件
const VueLoaderPlaugin = require('vue-loader/lib/plugin')

// 引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入 clean-webpack-plugin，以下定义使用了ES6的解构语法
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    //mode: 'production',
    mode: 'development',
    // 打包入口
    entry: './src/main.js',
    // 打包出口
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 打包规则
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        },{
            test: /\.(jpg|jpeg|png|svg|gif|ico)$/,
            loader: 'url-loader',
            options: {
                name: '[name].[ext]',
                limit: 10240
            }
        },{
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        },{
            test: /\.styl(us)?$/,
            use: [
                'vue-style-loader', 
                'css-loader', 
                'postcss-loader',
                'stylus-loader'
            ]
        }]
    },
    // 插件，注意复数
    plugins: [
        new VueLoaderPlaugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new CleanWebpackPlugin()
    ],
    //起别名，为了解决默认引用vue版本不对的问题
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
    
}